<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="ad" style="width: 200px;height: 200px;background: #58a;"></div>
    <script>
        // 声明一个函数

        // 原来
        // let fn = function(){};

        // ES6
        let fn = (a, b) => {
            return a + b;
        }
        // 调用函数
        let result = fn(1, 2);//3
        console.log(result);

        // 1.箭头函数this是静态的，this始终指向函数声明时所在作用域下的this的值
        // 原来的this是指向调用者的，谁调用就指向谁
        function getName1() {
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }

        // 设置window对象的name属性
        window.name = '学习';
        const school = {
            name: "xuexi"
        }
        // 直接调用
        getName1();//学习 this指向window
        getName2();//学习 this指向window

        // call方法调用
        getName1.call(school);//xuexi this指向调用该方法的school对象
        getName2.call(school);//学习 this指向初始时声明时所在作用域下的（window）对象

        // 2.不能作为构造函数实例化对象
        // let Person = (name,age)=>{
        //     this.name = name;
        //     this.age = age;
        // }
        // console.log(me);//报错：07.箭头函数.html:53 Uncaught TypeError: Person is not a constructor


        // let Person = (name,age){
        //     this.name = name;
        //     this.age = age;
        // }
        // let me = new Person('帅哥',18)
        // console.log(me);//正确

        //3.不能使用arguments变量
        // let fun = () => {
        //     console.log(arguments);
        // }
        // fun(1, 2, 3);//报错：arguments is not defined

        // 4.箭头函数的省略
        // 1.省略小括号，当形参有且只有一个的时候
        let add = n => {
            return n+n;
        }
        console.log(add(9));//18
        // 2.省略大括号，当代码体只有一条语句的时候,此时return必须省略，语句的执行结果就是函数的返回值
        let pow = n => n*n;
        console.log(pow(9));//81

    </script>
</body>

</html>